<#include "/common/header.html" />
		<div class="container">
			<div class="col-md-8 jy-content ">
				<div class="clearfix">
					<div class="user-info">
						<#if user.userInfoVO.avatarUrl??>
							<img id="odlUserAvatar" src="<#if user.userInfoVO.avatarUrl?contains('http:')>${(user.userInfoVO.avatarUrl)}<#elseif user.userInfoVO.avatarUrl?contains('files')>http://image.jianyiblog.com/${(user.userInfoVO.avatarUrl)}</#if>" />
							<#else>
								<img src="/img/jianyi-default.png" />
						</#if>
						<a href="#" class="user-name">${(user.userName)!'无名氏'}</a>
						<div class="clearfix">
							<ul class="clearfix">
								<li>关注<i>0</i></li>
								<li>字数<i>0</i></li>
								<li>收藏<i>0</i></li>
								<li>文章<i>0</i></li>
								<li>粉丝<i>0</i></li>
							</ul>
						</div>
					</div>
				</div>
				<div>
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" id="1">
							<a href="#article" aria-controls="article" role="tab" data-toggle="tab">文章</a>
						</li>
						<li role="presentation" id="2">
							<a href="#dynamic" aria-controls="dynamic" role="tab" data-toggle="tab">动态</a>
						</li>
						<li role="presentation" id="3">
							<a href="#hot" aria-controls="hot" role="tab" data-toggle="tab">热门</a>
						</li>
						<li role="presentation" id="4">
							<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">最新评论</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="content-main clearfix tab-pane" id="article" >
							<ul class="show-area">
								<#if personal_articles??>
									<#list personal_articles as per_article>
										<li>
											<div>
												<img src="<#if user.userInfoVO.avatarUrl?contains('http:')>${(user.userInfoVO.avatarUrl)}<#elseif user.userInfoVO.avatarUrl?contains('files')>http://image.jianyiblog.com/${(user.userInfoVO.avatarUrl)}<#else>/img/jianyi-default.png</#if>" />
												<a href="">${user.userInfoVO.userName!''}</a>
												<span>${per_article.articleTime?string("yyyy-MM-dd HH:mm:ss")}</span>
											</div>
											<div>
												<a href="/article/findArticleById/${per_article.id}">${per_article.articleName!''}</a>
												<p>${per_article.description!''}</p>
												<img src="${per_article.imgUrl!'/img/jianyi-default.png'}" />
											</div>
											<div class="clearfix">
												<a href="">@产品</a>
												<a href="">${per_article.collectCount!''}</a>
												<a href="">${per_article.commentCount!''}</a>
												<a>${per_article.viewCount!''}</a>
											</div>
										</li>
									</#list>
									<#else><button type="button" class="btn btn-info" id="write-article">开始你的第一篇博客吧</button>
								</#if>
							</ul>
							<button type="button" id="per_load_more" data-page="1" data-loading-text="加载中···" class="btn btn-default btn-block center-block jy-font-green" autocomplete="off">加载更多</button>
						</div>
						<div role="tabpanel" class="content-main clearfix tab-pane" id="dynamic">
							<#if user??>
								<div class="content">
									<a>${(user.userInfoVO.userName)!'无名氏'}</a>
									<span>于 · ${user.userInfoVO.registerTime?string("yyyy-MM-dd HH:mm:ss")} · 加入简易博客</span>
								</div>
							</#if>
						</div>
						<div role="tabpanel" class="content-main clearfix tab-pane" id="hot">...</div>
						<div role="tabpanel" class="content-main clearfix tab-pane" id="messages">...</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 jy-content padding">
				<div class="jy-like">
					<a href="#"><span></span>我关注的专题/文集</a>
					<a href="#"><span></span>我喜欢的文章</a>
					<p>我创建的专题</p>
					<a href="#"><span></span>创建一个新专题</a>
				</div>
			</div>
		</div>
<#include "/common/footer.html" />
<script type="text/javascript" src="${basePath}/js/ourjs/index.js"></script>
		<script>
			(function(win, doc) {
				//动态选择标签页
				var personal_articles = '${(personal_articles?size)!" "}';
				if(personal_articles>0 && personal_articles!=" "){
					document.getElementById("1").setAttribute("class","active");
					document.getElementById("article").setAttribute("class","content-main clearfix tab-pane active");
				}else{
					document.getElementById("2").setAttribute("class","active");
					document.getElementById("dynamic").setAttribute("class","content-main clearfix tab-pane active");
				};

				$().dropdown('toggle');
				var sopportTouch = "ontouchstart" in doc,
					tapStart = sopportTouch ? "touchstart" : "mousedown",
					tapEnd = sopportTouch ? "touchend" : "mouseup";
				doc.querySelector('#searchInput').addEventListener('focus', function() {
					this.parentElement.className = 'form-search-act';
				});
				doc.querySelector('#searchInput').addEventListener('blur', function() {
					this.parentElement.className = 'form-search';
				});
				$(doc).on('click', '#write-article', function() {
					win.location.href = "/article/toWriteArticle";
				});
				$('#per_load_more').on('click', function() {
					CENTER.loadData(this);
				});
			})(window, document);
		</script>
	</body>
</html>